<h2>loader.js</h2>
<p>This is the basic library. Can be considered a toolkit on its own, as it provides many useful functions and shortcuts.</p>
<hr/>
<h3>Functions</h3>
<ul>
	<li><a href="#$">$(element)</a></li>
	<li><a href="#$v">$v(element)</a></li>
	
	<li><a href="#create">OAT.Dom.create(tagName, [styleObj], [className])</a></li>
	<li><a href="#text">OAT.Dom.text(text)</a></li>
	<li><a href="#button">OAT.Dom.button(label)</a></li>
	<li><a href="#radio">OAT.Dom.radio(name)</a></li>
	<li><a href="#image">OAT.Dom.image(src, srcBlank, width, height)</a></li>
	<li><a href="#option">OAT.Dom.option(name, value, [parent])</a></li>
	
	<li><a href="#append">OAT.Dom.append([parent1, child1, child2, ...], ...)</a></li>
	<li><a href="#hide">OAT.Dom.hide(element)</a></li>
	<li><a href="#show">OAT.Dom.show(element)</a></li>
	<li><a href="#clear">OAT.Dom.clear(element)</a></li>
	<li><a href="#unlink">OAT.Dom.unlink(element)</a></li>
	<li><a href="#center">OAT.Dom.center(element, x, y, [reference])</a></li>
	<li><a href="#ischild">OAT.Dom.isChild(child, parent)</a></li>
	
	<li><a href="#isclass">OAT.Dom.isClass(element, className)</a></li>
	<li><a href="#addclass">OAT.Dom.addClass(element, className)</a></li>
	<li><a href="#removeclass">OAT.Dom.removeClass(element, className)</a></li>
	<li><a href="#getviewport">OAT.Dom.getViewport()</a></li>
	<li><a href="#getscroll">OAT.Dom.getScroll()</a></li>
	<li><a href="#position">OAT.Dom.position(element)</a></li>
	<li><a href="#getlt">OAT.Dom.getLT(element)</a></li>
	<li><a href="#getwh">OAT.Dom.getWH(element)</a></li>
	<li><a href="#moveby">OAT.Dom.moveBy(element, dx, dy)</a></li>
	<li><a href="#resizeby">OAT.Dom.resizeBy(element, dx, dy)</a></li>
	<li><a href="#removeselection">OAT.Dom.removeSelection()</a></li>
	<li><a href="#uriparams">OAT.Dom.uriParams()</a></li>
<hr/>
	<li><a href="#attach">OAT.Event.attach(element, event, callback)</a></li>
	<li><a href="#detach">OAT.Event.detach(element, event, callback)</a></li>
	<li><a href="#source">OAT.Event.source(event)</a></li>
	<li><a href="#cancel">OAT.Event.cancel(event)</a></li>
	<li><a href="#eposition">OAT.Event.position(event)</a></li>
	<li><a href="#prevent">OAT.Event.prevent(event)</a></li>
<hr/>
	<li><a href="#get">OAT.Style.get(element, property)</a></li>
	<li><a href="#apply">OAT.Style.apply(element, styleObj)</a></li>
	<li><a href="#opacity">OAT.Style.opacity(element, opacity)</a></li>
	<li><a href="#background">OAT.Style.background(element, url)</a></li>

</ul>
	
<h3>Properties</h3>
<ul>
	<li><a href="#isie">OAT.Browser.isIE</a></li>
	<li><a href="#isie6">OAT.Browser.isIE6</a></li>
	<li><a href="#isie7">OAT.Browser.isIE7</a></li>
	<li><a href="#isgecko">OAT.Browser.isGecko</a></li>
	<li><a href="#isopera">OAT.Browser.isOpera</a></li>
	<li><a href="#iswebkit">OAT.Browser.isWebKit</a></li>
	<li><a href="#iskonqueror">OAT.Browser.isKonqueror</a></li>
	<li><a href="#ismac">OAT.Browser.isMac</a></li>
</ul>

<hr/>

<h3><a name="$">$(element)</a></h3>
<p>This function is very popular and appears in almost every JS framework available. Its purpose
is to provide a shortcut for longer <code>document.getElementById()</code> functions. Basic usage is:</p>
<p class="code">var object = $("some_id");<br/>alert(object.tagName);</p>
<p>In this example, we assume that there is a HTML node with id "some_id". The $-function converts a string to the object.
Note that it is perfectly correct to pass an object reference to $-function, although not very useful.</p>
<p>Due to the presence of this function in toolkit, every other function that accepts a node reference as an argument can also accept its id.</p>
		
<h3><a name="$v">$v(element)</a></h3>
<p>This function is identical to <code>$$()</code>. They are shortcuts for <code>$().value</code>. You should use them
when getting a value of any form element.</p>

<h3><a name="create">OAT.Dom.create(tagName, [styleObj], [className])</a></h3>
<p>Used for dynamic creation of HTML nodes. Three parameters are accepted, the first one is mandatory. Example:</p>
<p class="code">
	var myDiv = OAT.Dom.create("div");
	var myStyledDiv = OAT.Dom.create("div", {color : "#f00", fontWeight : "bold"}, "myDiv_class");
</p>
<p>The second (optional) argument <em>styleObj</em> is an object comprised of CSS properties. For a full list of valid properties, see 
	<a href="http://developer.mozilla.org/en/docs/Dom:CSS">Mozilla documentation</a> and <a href="http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/obj_style.asp">MSDN</a>.
	CSS properties are not the same for these browsers, so specifying a floating element looks like
	<code>var element = OAT.Dom.create("div", {cssFloat:"left", styleFloat:"left"});</code> - the first declaration is for Gecko, the latter for MSIE.
</p>

<h3><a name="text">OAT.Dom.text(text)</a></h3>
<p>Creates and returns DOM text node with value of argument <em>text</em>.</p>

<h3><a name="button">OAT.Dom.button(label)</a></h3>
<p>Creates and returns DOM button with specified <em>label</em>..</p>

<h3><a name="radio">OAT.Dom.radio(name)</a></h3>
<p>Creates and returns DOM radio input with specified <em>name</em>.</p>

<h3><a name="image">OAT.Dom.image(src, srcBlank, width, height)</a></h3>
<p>Creates and returns DOM image node. <em>src</em> is image's URL; when PNG is used, 
specify <em>srcBlank</em> (url of transparent image) for Internet Explorer's workaround.</p>

<h3><a name="option">OAT.Dom.option(name, value, [parent])</a></h3>
<p>Creates and returns DOM &lt;option&gt; node with name of <em>name</em> and value of <em>value</em>. 
If <em>parent</em> is specified, this function also appends newly created node to that parent. Example:</p>
<p class="code">
	var s = OAT.Dom.create("select");
	OAT.Dom.option("apples",1,s);
	OAT.Dom.option("bananas",2,s);
	OAT.Dom.option("cherries",3,s);
</p>

<h3><a name="append">OAT.Dom.append([parent1, child1, child2, ...], ...)</a></h3>
<p>Links any number of DOM nodes. Takes variable amount of arguments, each argument must be an array. For each argument:</p>
<ul>
	<li>First value is taken as parent node</li>
	<li>All other values are appended to parent (in order in which they appear)</li>
</ul>

<h3><a name="hide">OAT.Dom.hide(element)</a></h3>
<p>Hides specified <em>element</em> by setting its <code>style.visibility</code> property.</p>

<h3><a name="show">OAT.Dom.show(element)</a></h3>
<p>Unhides previously hidden <em>element</em> by setting its <code>style.visibility</code> to default value.</p>

<h3><a name="clear">OAT.Dom.clear(element)</a></h3>
<p>This function clears all child nodes from an element. May be called with either object reference as an argument, or a id-string. So, for instance:</p>
<p class="code">OAT.Dom.clear("my_select_element");</p>
<p>removes all options from existing &lt;select&gt; element with id "my_select_element".</p>

<h3><a name="unlink">OAT.Dom.unlink(element)</a></h3>
<p>Unlinks <em>element</em> from DOM tree. Notice that the element is not destroyed as long as it can be referenced.</p>

<h3><a name="center">OAT.Dom.center(element, x, y, [reference])</a></h3>
<p>Centers <em>element</em> relative to its parent node. If <em>reference</em> is specified, 
this node is used instead of parent node. <em>x</em> and <em>y</em> are bools, specifying whether horizontal and/or vertical 
centering should be done.</p>

<h3><a name="ischild">OAT.Dom.isChild(child, parent)</a></h3>
<p>Tests whether a <em>child</em> is a subnode of node <em>parent</em>. The depth is not important here.</p>

<h3><a name="isclass">OAT.Dom.isClass(element, className)</a></h3>
HTML elements may be of multiple classes, this function 
returns <code>true</code> when at least one of <em>element</em>'s classes is <em>className</em>. Example:</p>
<p class="code">
	var div = OAT.Dom.create("div");
	div.className = "big red fox";
	alert( OAT.Dom.isClass(div,"fox"); ); // true
</p>

<h3><a name="addclass">OAT.Dom.addClass(element, className)</a></h3>
Adds class <em>className</em> to <em>element</em>.

<h3><a name="removeclass">OAT.Dom.removeClass(element, className)</a></h3>
Removes class <em>className</em> from <em>element</em>.

<h3><a name="getviewport">OAT.Dom.getViewport()</a></h3>
Returns size (2-item array) of current viewport.

<h3><a name="getscroll">OAT.Dom.getScroll()</a></h3>
Returns amount of scroll (2-item array) of current viewport.

<h3><a name="position">OAT.Dom.position(element)</a></h3>
<p>Returns x and y coordinates of <em>element</em>'s top left corner, relative to page's top left corner. 
Coordinates are returned in an array of two elements. To count this value, the whole tree of <code>offsetParent</code>s must be 
climbed up, so it is not wise to call this function too often. Example:</p>
<p class="code">
var coords = OAT.Dom.position(div);<br/>
alert("x: " + coords[0]+", y:" + coords[1]);
</p>

<h3><a name="getlt">OAT.Dom.getLT(element)</a></h3>
<p>Returns x and y coordinates of <em>element</em>'s top left corner, relative to its <code>offsetParent</code>, 
in form of array with two elements.</p>

<h3><a name="getwh">OAT.Dom.getWH(element)</a></h3>
<p>Returns width and height of <em>element</em> (in pixels), in form of array with two elements.</p>

<h3><a name="moveby">OAT.Dom.moveBy(element, dx, dy)</a></h3>
<p>Moves <em>element</em> by <em>dx</em> pixels horizontally and <em>dy</em> pixels vertically.</p>

<h3><a name="resizeby">OAT.Dom.resizeBy(element, dx, dy)</a></h3>
<p>Resizes <em>element</em> by <em>dx</em> pixels horizontally and <em>dy</em> pixels vertically.</p>

<h3><a name="removeselection">OAT.Dom.removeSelection()</a></h3>
<p>Unselects everything selected.</p>

<h3><a name="uriparams">OAT.Dom.uriParams()</a></h3>
<p>Returns an object of current URI parameters. So, for <code>/?a=b&amp;c[]=d&amp;c[]=e</code>, this returns:</p>
<pre class="code">
{
	a:"b",
	c:["d","e"]
}
</pre>

<hr/>


<h3><a name="attach">OAT.Event.attach(element, event, callback)</a></h3>
<p>Attaches function specified with <em>callback</em> to <em>event</em> detected on <em>element</em>. 
The <em>event</em> is specified without the "on" prefix. Function reference <em>callback</em> will be called with 
one argument, the event object reference. Example:</p>
<p class="code">OAT.Event.attach("myDiv", "click", function() { alert("!"); });</p>

<h3><a name="detach">OAT.Event.detach(element, event, callback)</a></h3>
<p>Removes attached <em>callback</em> from <em>element</em> fired with <em>event</em>. Note that only non-anonymous functions
 can be detached.</p>

<h3><a name="source">OAT.Event.source(event)</a></h3>
<p>Converts <em>event</em> to reference to element which fired it. This can be useful when multiple elements 
fire the same callback and one needs to know which element fired it. Example:</p>
<pre><p class="code">var callback = function(event) {
	var id = OAT.Event.source(event).id;
	alert("Event fired by " + id);
}
var div = OAT.Dom.create("div");
div.id = "myDiv";
OAT.Dom.attach(div, "click", callback);
</p></pre>

<h3><a name="cancel">OAT.Event.cancel(event)</a></h3>
<p>Cancels bubbling of <em>event</em>.</p>

<h3><a name="eposition">OAT.Event.position(event)</a></h3>
<p>Returns coordinates of <em>event</em>, relative to top left corner of page.</p>

<h3><a name="prevent">OAT.Event.prevent(event)</a></h3>
<p>Prevents default action if <em>event</em> (form submit, context menu, image-to-new-tab drag, ...).</p>

<hr/>

<h3><a name="get">OAT.Style.get(element, property)</a></h3>
<p>Returns a style <em>property</em> of <em>element</em>. This is different from accessing the <code>element.style.property</code> value,
as this function returns the computed style (i.e., set by stylesheets, etc.) instead of a dynamically created one. Example:</p>
<p class="code">
	var family = OAT.Style.get("elementId", "fontFamily");<br/>
	alert(family); // returns actual font-family for this element, wherever it is set
</p>

<h3><a name="apply">OAT.Style.apply(element, styleObj)</a></h3>
<p>Applies <em>styleObj</em> to <em>element</em>. <em>styleObj</em> follows the same conventions defined in OAT.Dom.create().</p>

<h3><a name="opacity">OAT.Style.opacity(element, opacity)</a></h3>
<p>Sets <em>element</em>'s opacity to <em>opacity</em>. Acceptable range: 0 (transparent) - 1 (opaque).

<h3><a name="background">OAT.Style.background(element, url)</a></h3>
<p>Sets <em>element</em>'s background image to the one specified in <em>url</em>.</p>

<hr/> 

<h3><a name="isie">OAT.Browser.isIE</a></h3>
<p>Returns <code>true</code> if used browser is Internet Explorer.</p>

<h3><a name="isie6">OAT.Browser.isIE6</a></h3>
<p>Returns <code>true</code> if used browser is Internet Explorer 6.</p>

<h3><a name="isie7">OAT.Browser.isIE7</a></h3>
<p>Returns <code>true</code> if used browser is Internet Explorer 7.</p>

<h3><a name="isgecko">OAT.Browser.isGecko</a></h3>
<p>Returns <code>true</code> if used browser is Gecko-based (Firefox, Mozilla).</p>

<h3><a name="isopera">OAT.Browser.isOpera</a></h3>
<p>Returns <code>true</code> if used browser is Opera.</p>

<h3><a name="iswebkit">OAT.Browser.isWebKit</a></h3>
<p>Returns <code>true</code> if used browser is Apple WebKit.</p>

<h3><a name="iskonqueror">OAT.Browser.isKonqueror</a></h3>
<p>Returns <code>true</code> if used browser is KDE Konqueror.</p>

<h3><a name="ismac">OAT.Browser.isMac</a></h3>
<p>Returns <code>true</code> if used operating system is MacOS.</p>

